<template>
	<view >
		<y-tabs @change="paging.reload()" fixed :list="tabList"  v-model="type"></y-tabs>
		<z-paging ref="paging" v-model="list" @query="getList" :use-page-scroll="true">
			<view class="p-10">
				<view v-for="(item,index) in list" class="bg-white round-8 p-16 flex flex-x-space-between flex-y-center mt-10">
					<view class="flex flex-column gap-4">
						<text>{{item.remarks}}</text>
						<text class="fs-12 text-666">{{item.create_time}}</text>
					</view>
					<text
						class="fs-20 fw-bold " :class="item.type==1?'text-red':'text-blue'">{{item.type==1?'-':'+'}}{{$tool.formatNumber(item.number)}}</text>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";
	import { reactive, ref } from 'vue';
	import { getBill } from '@/api/user'
	import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
	import { $tool } from "@/utils";
	const type = ref(0)
	const paging = ref(null)
	const list = ref([])
	useZPaging(paging)
	const tabList = reactive([
		{ label: '全部', value: 0 },
		{ label: '消耗', value: 1 },
		{ label: '获得', value: 2 }
	])

	const getList = (page, limit) => {
		getBill({ page: page, limit: limit, type: type.value }).then(res => {
			paging.value.complete(res.data)
		})
	}
</script>

<style>

</style>